<template>
  <div>
    <a-radio-group v-model:value="activeName" size="default">
      <a-radio-button value="component">组件属性</a-radio-button>
      <a-radio-button value="style">页面属性</a-radio-button>
    </a-radio-group>

    <div v-if="activeName == 'component'">
      <component
        v-if="current"
        ref="ComponentRef"
        :is="componentRender(current.component)"
        :current="current"
      ></component>
      <div v-else>
        <over-all-config></over-all-config>
      </div>
    </div>
    <div v-else>
      <over-all-config></over-all-config>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  ref,
  inject,
  computed,
  toRefs,
  reactive,
  h,
} from "vue";
import { LowCodeImp } from "@/components/low-code/core";
import overAllConfig from "./over-all-config/index.vue";
import { components as componentMapping } from "@/components/low-code/pc-library/index";

export default defineComponent({
  components: {
    overAllConfig,
  },
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const current = computed(() => {
      return lowCode.dataCenter[lowCode.currentKey];
    });

    const componentRender = (component: string) => {
      return componentMapping.has(component)
        ? h(componentMapping.get(component)!.setting as any)
        : null;
    };

    const data = reactive({
      activeName: "component",
      handleClick() {},
    });

    return {
      current,
      componentRender,
      ...toRefs(data),
    };
  },
});
</script>

<style scoped>
.ant-radio-group {
  width: 100%;
}
.ant-radio-button-wrapper {
  width: 50%;
  text-align: center;
}
</style>
